<template>
  <el-select
    remote
    filterable
    clearable
    :loading="loading"
    style="width: 100%;"
    @focus="focusInput"
    :remote-method="remoteMethod"
    :disabled="disabled"
    :placeholder="item.plugin.placeholder"
    v-model="form.data[item.prop]">
    <el-option
      v-for="(option, optionIndex) in options"
      :key="'optionIndex' + optionIndex"
      :disabled="form.batchInTurn ? (option.label !== '交付') : (form.batchInTurn ? option.label !== '计划' : false)"
      :label="label ? option[label] : option.label"
      :value="value ? option[value] : option.value">
      <span style="float: left">{{ label ? option[label] : option.label }}</span>
      <span style="float: right;  font-size: 13px; color: #8492a6;">
        {{ remarks ? option[remarks] : option.remarks }}
      </span>
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "xl-select",
  props: {
    dictionary: {
      type: Object,
      default: {}
    },
    item: {
      type: Object,
      default: {}
    },
    form: {
      type: Object,
      default() {
        return {
          parentId: "",
          list: [],
          rules: {},
          childTable: []
        }
      }
    }
  },
  data() {
    return {
      number: 20,
      loading: false,
      options: [],
      deptData: [],
      user: {
        show: false,
        infos: ""
      },
      list: []
    }
  },
  computed: {
    disabled() {
      return this.form.data.id && this.item.editReadonly === "1"
    },
    value() {
      return this.item.plugin.props ? this.item.plugin.props.value : false;
    },
    label() {
      return this.item.plugin.props ? this.item.plugin.props.label : false;
    },
    remarks() {
      return this.item.plugin.props ? this.item.plugin.props.remarks : false;
    }
  },
  created() {
    const list = this.item.remote ? this.dictionary[this.item.dictType] : this.item.dicData;
    this.list = JSON.parse(JSON.stringify(list));
  },
  mounted() {
    if (!this.form.data[this.item.prop]) {
      if (this.item.dicValue && this.item.type === "select") {
        this.$set(this.form.data, this.item.prop, this.item.dicValue)
      }
    }
    this.setOptionByValue();
  },
  methods: {
    setOptionByValue() {
      const value = this.form.data[this.item.prop];
      let list = JSON.parse(JSON.stringify(this.list));
      if (value) {
        this.options = [list.find(item => item.value === value)];
      } else {
        this.options = list.slice(0, this.number);
      }
    },
    remoteMethod(query) {
      let list = JSON.parse(JSON.stringify(this.list));
      if (query.trim()) {
        this.loading = true;
        // 为了不卡顿限制模糊匹配最大值为(number变量)
        this.options = list.filter(item => {
          return item.label.toLowerCase()
            .indexOf(query.toLowerCase()) > -1;
        }).slice(0, this.number);
        this.loading = false;
      } else {
        // 搜索不到默认展示前100项
        this.setOptionByValue();
      }
    },
    // 输入框获取焦点触发
    focusInput() {
      let list = JSON.parse(JSON.stringify(this.list));
      if (!this.form.data[this.item.prop]) {
        this.options = list.slice(0, this.number);
      }
    }
  }
}
</script>
